<template>
  <div class="h-full w-full">
    <el-button @click="exportContent">导出为 .md 文件</el-button>
    <Editor
        id="d-Editor"
        class="editor"
        :locale="zhHans"
        :plugins="plugins"
        :uploadImages="uploadImages"
        :value="value"
        mode="split"
        placeholder="请输入内容..."
        @change="handleChange"
    />
  </div>
</template>

<script lang="ts" setup>

import { ref,onMounted, onUnmounted, watch, nextTick } from "vue"
import { Editor } from "@bytemd/vue-next"
import gfm from "@bytemd/plugin-gfm"
import zhHans from "bytemd/locales/zh_Hans.json"
import footnotes from "@bytemd/plugin-footnotes"
import frontmatter from "@bytemd/plugin-frontmatter"
import highlight from "@bytemd/plugin-highlight"
import mediumZoom from "@bytemd/plugin-medium-zoom"
import gemoji from "@bytemd/plugin-gemoji"
import math from "@bytemd/plugin-math"
import breaks from "@bytemd/plugin-breaks"
import mermaid from "@bytemd/plugin-mermaid"
import externalLinks from "@bytemd/plugin-external-links"
import pluginMermaidZhHans from "@bytemd/plugin-mermaid/locales/zh_Hans.json"
import pluginGfmZhHans from "@bytemd/plugin-gfm/locales/zh_Hans.json"
import pluginMathZhHans from "@bytemd/plugin-math/locales/zh_Hans.json"
import theme from "bytemd-plugin-theme"
import { changeTheme, themeList } from "bytemd-plugin-theme"
import highLightPlugin from "bytemd-plugin-highlight"
import { setTheme } from "bytemd-plugin-theme"
import { setTheme as setHighLightTheme } from "bytemd-plugin-highlight"
import "./index.css";

const plugins = [
  gfm({ locale: pluginGfmZhHans }),
  highlight(),
  mediumZoom(),
  gemoji(),
  math({ locale: pluginMathZhHans }),
  mermaid({ locale: pluginMermaidZhHans }),
  breaks(),
  footnotes(),
  frontmatter(),
  externalLinks({ test: href => true }),
  theme(),
  highLightPlugin()
]

const value = ref("")

function handleChange(val: string) {
  value.value = val;
}
function uploadImages() {}
// 导出 Markdown 内容的方法
function exportContent() {
  const content = value.value; // 获取编辑器中的内容
  const blob = new Blob([content], { type: 'text/markdown' }); // 创建 Blob 对象
  const url = URL.createObjectURL(blob); // 创建对象 URL
  const a = document.createElement('a'); // 创建 <a> 元素
  a.href = url;
  a.download = 'document.md'; // 设置下载文件名
  a.click(); // 触发点击事件以开始下载
  setTimeout(() => {
    URL.revokeObjectURL(url); // 清理对象 URL
  }, 100);
}

</script>

<style scoped>
.editor {
  width: 100%;  /* 确保宽度占满父容器 */
  overflow-y: auto;  /* 如果内容超过可视区域，显示滚动条 */
}

</style>